<template is="msgItem1">
	<view class="content">
			
		<view class="hb-describe">
			<input class="number uni-input" type="text" placeholder="请输入拍照内容描述" placeholder-class="number_pla" v-model="hbtitle"/>
		</view>
		
		<img class="image-upload" v-bind:src="uploadimg" @click="imageUp">
		
		<view class="resources">——  参考素材  ——</view>
		<view class="material-list">
			
			<view class="column" v-for="(vo,index) in materiallist.data" :key="index" @click="cover(vo.desc,vo.pic)">
				<view class="title">{{vo.desc}}</view>
				<view class="img"><img :src="imgurl + vo.pic" alt=""></view>
			</view>
			
		</view>
		
		<view style="height: 50px;"></view>
		
		<view class="gotosend" @click="gotohb">确定，返回发红包</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hbtitle:"",
				uploadimg:"/static/imges.png",
				uploadfile:"",
				userinfo:"",
				materiallist:"",
				imgurl:this.$url
			}
		},
		onLoad() {
			var _self = this
			try {
			    const value = uni.getStorageSync('userinfo');
			    if (value) {
			        _self.userinfo = value
			    }
			} catch (e) {
			    // error
			}
			uni.request({
			    url: _self.$url + '/api/material/getMaterialList', 
				method:"post",
			    data: {
			        page:"1",
					limit:"100"
			    },
				header: {
					'token': _self.userinfo.token //自定义请求头信息
				},
			    success: (res) => {
					if(res.data.status == "1"){
						_self.materiallist = res.data.result
						console.log(_self.materiallist)
					}
			        
			    }
			});
		},
		methods: {
			imageUp:function(event){
				var _self = this
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						// _self.uploadimg = res.tempFilePaths[0]
						// _self.uploadfile = res.tempFiles[0]
						const tempFilePaths = res.tempFiles[0];
						console.log(tempFilePaths.path)
						uni.uploadFile({
							url: _self.$url + '/api/lucky_money/picUpload',
							filePath: tempFilePaths.path,
							name: 'pic_file',
							header: {
								'token': _self.userinfo.token ,//自定义请求头信息
								'content-type':"multipart/form-data"
							},
							success: (uploadFileRes) => {
								var newj = JSON.parse(uploadFileRes.data);
								console.log(newj)
								_self.uploadimg = _self.imgurl + newj.result.file
								_self.uploadfile = newj.result.file
								console.log(_self.uploadimg)
							}
						});
				    }
				});
			},//图片上传
			cover(title,img){
				var _self = this
				this.hbtitle = title
				this.uploadimg = _self.imgurl + img
			},//提取素材覆盖
			gotohb(){
				var _self = this
				
				uni.setStorage({
				    key: 'hbinfo',
				    data: {
						imgtitle:_self.hbtitle,
						img:_self.uploadfile,
					},
					success:function(){
						uni.switchTab({
						    url: '/pages/index/index'
						});
					}
				});
				
			},//返回首页发红包
			
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
		font-size: 14px;
	}
	view{
		box-sizing: border-box;
	}
	.hb-describe{
		width: 90%;
		margin:0 auto;
		margin-top:30rpx;
		padding:40rpx 20rpx;
		background: #fff;
		border-radius: 5px;
	}
	.image-upload{
		display: block;
		width: 200rpx;
		height: 200rpx;
		margin:50rpx auto;
		border-radius: 5px;
	}
	.resources{
		width: 100%;
		text-align: center;
		color:#C4C4C4;
		margin-top:100rpx;
	}
	
	.material-list{
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top:15rpx;
		.column{
			width: 90%;
			background: #fff;
			border-radius: 5px;
			overflow: hidden;
			margin:0 0 25rpx 0; 
			padding:15rpx 30rpx 15rpx 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.title{
				width: 75%;
			}
			.img{
				width: 25%;
				text-align: right;
				img{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	.gotosend{
		position: fixed;
		bottom:0px;
		width: 100%;
		background: #f4313e;
		text-align: center;
		color:#fff;
		padding:25rpx;
	}
</style>
